import mxgraph from '@/utils/mxgraph'
const { mxUtils,mxEvent,mxConstants } = mxgraph

// 定义一个构造函数
export function mxIconSet(state) {
  this.images = [];
  var graph = state.view.graph;

  // 复制按钮
  var img = mxUtils.createImage('/images/copy.png'); //图片的路径
  img.setAttribute('title', 'Duplicate'); //图片提示信息
  img.style.position = 'absolute';
  img.style.cursor = 'pointer';
  img.style.width = '16px';
  img.style.height = '16px';
  img.style.left = (state.x + state.width) + 'px';
  img.style.top = (state.y + state.height) + 'px';

  // mxEvent.addGestureListeners(img,
  //   mxUtils.bind(this, function (evt) {
  //     var s = graph.gridSize; //10
  //     graph.setSelectionCells(graph.moveCells([state.cell], s, s, true)); //复制当前节点，并向有下角移动s个像素，选中当前新节点
  //     mxEvent.consume(evt);
  //     this.destroy();
  //   })
  // );


  mxEvent.addListener(img, 'click',
  mxUtils.bind(this, function (evt) {
    var s = graph.gridSize+30; //10
    graph.setSelectionCells(graph.moveCells([state.cell], s, s, true)); //复制当前节点，并向有下角移动s个像素，选中当前新节点
    mxEvent.consume(evt);
    this.destroy();
  })
);

  state.view.graph.container.appendChild(img);
  this.images.push(img);

  // 删除按钮
  var img = mxUtils.createImage('/images/delete2.png');
  img.setAttribute('title', 'Delete');
  img.style.position = 'absolute';
  img.style.cursor = 'pointer';
  img.style.width = '16px';
  img.style.height = '16px';
  img.style.left = (state.x + state.width) + 'px';
  img.style.top = (state.y - 16) + 'px';

  mxEvent.addGestureListeners(img,
    mxUtils.bind(this, function (evt) {
      // Disables dragging the image
      mxEvent.consume(evt);
    })
  );

  mxEvent.addListener(img, 'click',
    mxUtils.bind(this, function (evt) {
      graph.removeCells([state.cell]);
      mxEvent.consume(evt);
      this.destroy();
    })
  );

  state.view.graph.container.appendChild(img);
  this.images.push(img);
}

mxIconSet.prototype.destroy = function () {
  if (this.images != null) {
    for (var i = 0; i < this.images.length; i++) {
      var img = this.images[i];
      img.parentNode.removeChild(img);
    }
  }

  this.images = null;
};


export function updateStyle(state, hover)
{
  if (hover)
  {
    state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
  }
  
  // Sets rounded style for both cases since the rounded style
  // is not set in the default style and is therefore inherited
  // once it is set, whereas the above overrides the default value
  state.style[mxConstants.STYLE_ROUNDED] = (hover) ? '1' : '0';
  state.style[mxConstants.STYLE_STROKEWIDTH] = (hover) ? '4' : '1';
  state.style[mxConstants.STYLE_FONTSTYLE] = (hover) ? mxConstants.FONT_BOLD : '0';
}